<template>
	<div class="sta">
		<div class="pro-dynamics">
			<div class="pro-header">
				<h4 class="left">项目动态</h4>
				<div class="pro-search" >
					<i class="el-icon-search el-input__icon serch-icon" @click="searchDyna()"></i>
				    <el-date-picker
				      v-model="value1"
				      type="date"
				      placeholder="search"
				      format="yyyy-MM-dd"
				      >
				    </el-date-picker>
				</div>
			</div>
			<div class="pro-content">
				<ul @mousewheel="getProMore()">
					<li v-for="item in proList">
					    <p class="cont"><span>{{item.empName}}&nbsp;:&nbsp;{{item.content}}</span></p>
					    <p class="desc">
					    	<span>{{item.createTime}}</span>
					    	<span>{{item.description}}</span>
					    	<span></span>
					    </p>
					</li>
				</ul>
				<div class="load-more">
					<p v-show="ProShow">加载更多</p>
					<p v-show="!ProShow">加载中...</p>
				</div>
			</div>
		</div>
		<div class="task-sta">
			<div class="task-header">
				<h4 class="left">任务统计</h4>
				<span @click="undone(0,0)">未完成({{undonePage}})</span>
				<span @click="overTime(0,0)">已逾期({{latePage}})</span>
				<span  @click="done(0,0)">已完成({{donePage}})</span>
			</div>
			<div class="task-content">
				<ul class="task-wrap" @mousewheel= "geTasktMore()">
					<li class="task-list" v-for="(item,index) in TaskList" >
						<div class="task-info clearfix" :class="[{ bl_red: item.type == 'VERY' },{  bl_orange: item.type == 'URGENT' },{ bl_blue: item.type == 'COMMON' }]">
                            <div class="info">
                                <h3>{{item.description}}</h3>
                                <div class="clearfix">
                                    <span class="deal-des">{{item.name}}</span>
                                    <span class="deal-person">{{item.execEmpName}}</span>
                                    <span class="dealline">{{timeWrap[index]}}</span>
                                </div>
                            </div>
                            <div class="right">
                                <!--<el-button @click="reEditTask(index, taskIndex)">编辑</el-button>-->
                                <el-checkbox  
                                ></el-checkbox>
                            </div>
                        </div>
					</li>
				</ul>
				<div class="load-more">
					<p v-show="TaskShow">加载更多</p>
					<p v-show="!TaskShow">加载中...</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input2: '',
				ProPageNo:'0',
				ProPageSize:'6',
				TaskPageSize:'6',
				comState:'0',
				log:'',
				result:'',
				value1:'',
				TaskShow:true,
				ProShow:true,
				proList:[],
				TaskList:[],
				pageSum:'',
				taskStatic:'',
				pageNoW:'0',
				pageNoY:'0',
				pageNoQ:'0',
				clearInit:'0',
				timeWrap:[],
				undonePage:'',
				donePage:'',
				latePage:''
			}
		},
		created() {
			this.getProjectDynamics(this.ProPageNo,this.ProPageSize);
	        this.getTaskStatistics(this.pageNoW,this.TaskPageSize);
		},
		methods: {
			getProjectDynamics: function(ProPageNo,ProPageSize) {
				// console.log(localStorage.getItem('projectId'))
				this.$http.post	(
		            this.h + '/projects/'+ localStorage.getItem('projectId') + '/logs',
		            {
		            	"pageNo" : ProPageNo,
		            	"pageSize": ProPageSize,
		            },
		            {
		                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
		            }).then((res) => {
		                // console.log(res);
		                this.pageSum = res.data.data.pageSum;
		                this.ProShow = true;
		                console.log(this.ProPageNo ,this.pageSum)
		                if(this.ProPageNo < this.pageSum) {
		                	this.log = res.data.data.logLists;
		                	this.proList = this.proList.concat(this.log);
		                	// console.log(this.log)
		                }else {
		                	// console.log("1")
		                	return;
		                }
		                
		                // console.log(this.log)
		            }).catch((err) => {
		                console.log('项目日志未获取！');
		            });
			},
			getTaskStatistics: function(TaskPageNo,TaskPageSize)　{
				this.undone(TaskPageNo);
				this.$http.post(
					this.h +　'/projects/' + localStorage.getItem('projectId') + '/overTimeTasks',
					{
						"pageNo":  TaskPageNo,
 						"pageSize": this.TaskPageSize
					},
					{
						headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
					}).then((res)=> {
		                this.latePage = res.data.data.overTimeTaskSum;

					}).catch((err) => {
						console.log('任务逾期接口未获取！')
					})
				this.$http.post	(
		            this.h + '/projects/' + localStorage.getItem('projectId'),
		            {
		            	"comState" : 1,
		            	"pageNo" : TaskPageNo,
		            	"pageSize": this.TaskPageSize,
		            },
		            {
		                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
		            }).then((res) => {
		               	this.donePage = res.data.data.tasksSum;
		            }).catch((err) => {
		                console.log('任务统计未完成已完成接口未获取！');
		            });
			},
			searchDyna: function() {
				console.log(this.value1);
				
			},
			// 未完成
			undone: function(pageNo,clearInit) {
				this.TaskList = (clearInit==0)?[]:this.TaskList;
				this.timeWrap = (clearInit==0)?[]:this.timeWrap;
				this.taskStatic = 0;
				this.comState = 0;
				this.pageNoY = "0";
				this.pageNoQ = "0";
				this.$http.post	(
		            this.h + '/projects/' + localStorage.getItem('projectId'),
		            {
		            	"comState" : this.comState,
		            	"pageNo" : pageNo,
		            	"pageSize": this.TaskPageSize,
		            },
		            {
		                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
		            }).then((res) => {
		                console.log(res);
		                this.result = res.data.data.taskLists;
		                this.TaskShow = true;
		                this.pageSum = res.data.data.pageSum;
		                this.undonePage = res.data.data.tasksSum;
		                console.log("222")
		                console.log(pageNo,this.pageSum)
		                if( pageNo  < this.pageSum) {
		                	this.TaskList = this.TaskList.concat(this.result)
		                	for(var i = 0; i < this.TaskList.length; i++) {
			               		var time = this.result[i].lastEndTime.substr(5, 5);
			               		var reg =/(\d{2})\-(\d{2})/;
							    var date = time.replace(reg,"$1月$2日");
							    if(date.substr(0,1) == 0) {
							    	date = date.substr(1,date.length)
							    }
			               		this.timeWrap.push(date);
			               	} 
		                }else {
		                	return;
		                } 
		            }).catch((err) => {
		                console.log('任务统计未完成已完成接口未获取！');
		            });
			},
			// 已完成
			done: function(pageNo,clearInit) {
				console.log(clearInit)
				this.TaskList = (clearInit==0)?[]:this.TaskList;
				this.timeWrap = (clearInit==0)?[]:this.timeWrap;
				console.log(this.TaskList)
				this.pageNoW = "0";
				this.pageNoQ = "0";
				this.taskStatic = 1;
				this.comState = 1;
				this.$http.post	(
		            this.h + '/projects/' + localStorage.getItem('projectId'),
		            {
		            	"comState" : this.comState,
		            	"pageNo" : pageNo,
		            	"pageSize": this.TaskPageSize,
		            },
		            {
		                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
		            }).then((res) => {
		                console.log(res);
		                this.result = res.data.data.taskLists;
		                this.TaskShow = true;
		                this.pageSum = res.data.data.pageSum;
		               	this.donePage = res.data.data.tasksSum;
		                console.log(pageNo,this.pageSum)
		                if(pageNo < this.pageSum) {
		                	this.TaskList = this.TaskList.concat(this.result)
			                for(var i = 0; i < this.TaskList.length; i++) {
			               		var time = this.result[i].lastEndTime.substr(5, 5);
			               		var reg =/(\d{2})\-(\d{2})/;
							    var date = time.replace(reg,"$1月$2日");
							    if(date.substr(0,1) == 0) {
							    	date = date.substr(1,date.length)
							    }
			               		this.timeWrap.push(date);
			               	} 
		                }else {
		                	return;
		                } 
		            }).catch((err) => {
		                console.log('任务统计未完成已完成接口未获取！');
		            });
			},
			// 已逾期
			overTime: function(pageNo,clearInit) {
				this.TaskList = (clearInit==0)?[]:this.TaskList;
				this.timeWrap = (clearInit==0)?[]:this.timeWrap;
				this.pageNoW = "0";
				this.pageNoY = "0";
				this.taskStatic = 2;
				this.$http.post(
					this.h +　'/projects/' + localStorage.getItem('projectId') + '/overTimeTasks',
					{
						"pageNo":  pageNo,
 						"pageSize": this.TaskPageSize
					},
					{
						headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
					}).then((res)=> {
						console.log(res)
						this.result = res.data.data.taskLists;
						this.TaskShow = true;
		                this.pageSum = res.data.data.pageSum;
		                this.latePage = res.data.data.overTimeTaskSum;
		                console.log("111")
		                console.log(pageNo,this.pageSum)
		                if(pageNo < this.pageSum) {
		                	this.TaskList = this.TaskList.concat(this.result);
		                	console.log(this.TaskList)
		                	for(var i = 0; i < this.TaskList.length; i++) {
			               		var time = this.result[i].lastEndTime.substr(5, 5);
			               		var reg =/(\d{2})\-(\d{2})/;
							    var date = time.replace(reg,"$1月$2日");
							    if(date.substr(0,1) == 0) {
							    	date = date.substr(1,date.length)
							    }
			               		this.timeWrap.push(date);
			               	} 
		                }else {
		                	return;
		                } 

					}).catch((err) => {
						console.log('任务逾期接口未获取！')
					})
			},
			getProMore: function() {
				this.ProShow  = false;
				this.ProPageNo ++;
				console.log("滚动监听")
				this.getProjectDynamics(this.ProPageNo,this.ProPageSize)
			},
			geTasktMore: function() {
				this.clearInit = "1";
				this.TaskShow = false;
				console.log("滚动监听")
				switch(this.taskStatic)
					{
					case 0:
						console.log("未完成！")
						this.pageNoW ++;
					  	this.undone(this.pageNoW,this.clearInit);
					  	break;
					case 1:
						console.log("已完成！")
						this.pageNoY ++;
					  	this.done(this.pageNoY,this.clearInit)
					  	break;
					case 2:
						console.log("已逾期！")
						this.pageNoQ ++;
					  	this.overTime(this.pageNoQ,this.clearInit);
					  	break;
					}
				
			}
			
		}
	}
</script>

<style>
	.task-wrap>li:nth-child(2n) {
		background: #e7e9f4;
	}
	.task-wrap>li:nth-child(2n) .el-checkbox__inner {
		background: #e7e9f4;
	}
	.task-content ,.pro-content {
		height: 522px;
		overflow: auto;
	}
	.task-content {
		height: 620px;
	}
	.task-content .load-more,.pro-content .load-more {
		text-align: center;
		border:0;
		padding: 20px 0;
	}
	.load-more p {
		cursor: pointer;
		color: #bfc1c9;
	}
	.left {
		float: left;
	}
	.right {
		float: right;
	}
	.sta {
		width: 92%;
	    margin: 34px 4%;
	    border-radius: 5px;
	}
	.pro-dynamics ,.task-sta{
		float : left;
		width: 44%;
		border: 1px solid #e7e9f4;
		border-radius: 5px;
	}
	.task-sta {
		width: 50% ;
	}
	.task-sta {
		margin-left: 6%;
	}
	.pro-header .pro-search {
		float: right;
		position: relative;
	}
	.pro-header,.task-header {
		background: #F7F8FC;
		overflow: hidden;
		height: 46px;
		line-height: 46px;
		padding-left: 30px;
		padding-right: 10px;
	}
	.pro-header h4 {
		font-size:16px;
		font-weight: bold;
	}
	.desc>span {
		margin-right:5px;
		font-size: 13px;
		color: #bbb;
	}
	.pro-content {
		padding: 0px 0px 10px;
	}
	.pro-content li {
		padding: 16px 20px;
		border-top: 1px solid #e7e9f4;
	}
	.cont {
		font-weight: bold;
		margin-bottom: 5px;
		line-height: 22px;
	}
	.task-header h4 {
		font-size: 16px;
		font-weight: bold;
	}
	.task-header>span {
		margin-left: 10px;
		cursor: pointer;
	}
	.task-header>span:nth-child(1) {
		margin-left: 20px;
	}
	.task-info {
		padding: 15px 0 15px 20px;
	}
    .task-info  .info {
        float: left;
        width: 100%;
        padding-right: 40px;
        margin-right: -40px;
		font-size: 14px;
	} 
	.info h3 {
		font-size: 16px;
		line-height: 22px;
	}
    .info  div {
        margin-top: 10px;
    }
    .info  span {
        float: left;
    }
    .info  .deal-person {
        color: #000;
        margin-right: 30px;
    }
	.info .deadline {
		color: #cececf;
		line-height: 7px;
	}
	.info .deal-des {
		color: #bfc1c9;
        margin-right: 30px;
	}
	.operate {
        float: right;
    }
    .task-list {
    	padding: 7px 25px 7px 10px;
    }
    .pro-search .el-icon-date {
    	display: none;
    }
    .serch-icon {
    	z-index: 20;
    	position: absolute;
    }
    .bl_red {
    	border-left:4px solid #fa6e60;
    }
    .bl_orange {
    	border-left:4px solid #49cef6;
    }
    .bl_blue {
	    border-left: 4px solid #00c583;
	}
	.dealline {
		display: inline-block;
		padding: 5px;
		background: #C0C0CC;
		color: #fff;
		border-radius: 2px;
		line-height: 7px;
	}
</style>

